<template>
	<view>
		<view class="od-box" v-if="info">
			<view class="od-title flex-warp-order flex-just">
				订单详情
				<slot name="detail-edit"></slot>
			</view>
			<view class="od-item" @click.stop="jump('/pages/client/index/list', { id: info.product_id })">
				<view class="item-right">
					<view class="item-txt" style="margin-left: 2rpx;">{{ info.pro_title }}</view>
					<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
				</view>
			</view>

			<!-- 项开始 -->
			<view class="od-item">
				<view class="item-tip" @click.stop="openPopup" >服务领域 <image v-if="info.pro_name == '打官司'"  src="@/static/img/question.png" mode=""
                                           style="width: 30rpx;height: 30rpx"></image></view>
				<view class="item-right">
					<view class="item-txt">{{ info.area_name }}</view>
				</view>
			</view>
			<template v-if="info.pro_name == '问一下'">
				<view class="od-item">
					<view class="item-tip">服务方式</view>
					<view class="item-right">
						<view class="item-txt">{{ info.serve_type }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">服务时长</view>
					<view class="item-right">
						<view class="item-txt">{{ info.serve_time }}</view>
					</view>
				</view>
				<template v-if="info.serve_type == '线下面谈'">
					<view class="od-item">
						<view class="item-tip">服务时间</view>
						<view class="item-right">
							<view class="item-txt">{{ info.server_time_text }}</view>
						</view>
					</view>
					<view class="od-item">
						<view class="item-tip">服务地点</view>
						<view class="item-right" v-if="info.server_address == '另行协商'"><view class="item-txt">另行协商</view></view>
						<view class="item-right" @click="$refs.popupSelectMaps.open()" v-else>
							<view class="forward-box" style="line-height: 60rpx; padding-top: 0;">
								<view class="forward-left">
									<view class="image-wrapper"><image src="@/static/img/order-locat.png" mode="aspectFit"></image></view>
								</view>
								<view class="forward-txt text-ellipsis">{{ info.server_address }}</view>
							</view>
						</view>
					</view>
				</template>
			</template>
			<template v-if="info.pro_name == '陪同办'">
				<view class="od-item">
					<view class="item-tip">服务内容</view>
					<view class="item-right">
						<view class="item-txt">{{ info.server_content }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">服务时长</view>
					<view class="item-right">
						<view class="item-txt">{{ info.serve_time }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">服务时间</view>
					<view class="item-right">
						<view class="item-txt">{{ info.server_time_text }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">服务地点</view>
					<view class="item-right" v-if="info.server_address == '另行协商'"><view class="item-txt">另行协商</view></view>
					<view class="item-right" @click="$refs.popupSelectMaps.open()" v-else>
						<view class="forward-box" style="line-height: 60rpx;padding-top: 0;">
							<view class="forward-left">
								<view class="image-wrapper"><image src="@/static/img/order-locat.png" mode="aspectFit"></image></view>
							</view>
							<view class="forward-txt text-ellipsis">{{ info.server_address }}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name == '私人律师'">
				<view class="od-item">
					<view class="item-tip">服务期限</view>
					<view class="item-right">
						<view class="item-txt">{{ info.server_dead }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">服务级别</view>
					<view class="item-right" @click="getGradeTip()">
						<view class="item-txt">{{ info.server_grade }}私人律师</view>
						<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name == '写合同'">
				<view class="od-item">
					<view class="item-tip">文书类型</view>
					<view class="item-right">
						<view class="item-txt">{{ info.document.toString() }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">文书数量</view>
					<view class="item-right">
						<view class="item-txt">{{ info.docu_num }}份</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">完成时间</view>
					<view class="item-right">
						<view class="item-txt">{{ info.docu_time_text }}</view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name == '审案子'">
				<view class="od-item">
					<view class="item-tip">案件阶段</view>
					<view class="item-right">
						<view class="item-txt">{{ info.meet_stage }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">我的身份</view>
					<view class="item-right">
						<view class="item-txt">{{ info.case_ident }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">案件数量</view>
					<view class="item-right">
						<view class="item-txt">{{ info.case_num }}</view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name == '刑事会见'">
				<view class="od-item">
					<view class="item-tip">办案阶段</view>
					<view class="item-right">
						<view class="item-txt">{{ info.meet_stage }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">涉嫌罪名</view>
					<view class="item-right">
						<view class="item-txt" v-if="info.accusation">{{ info.accusation }}</view>
						<view class="item-txt" v-else>具体请询问委托人</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">会见地点</view>
					<view class="item-right">
						<view class="item-txt" v-if="info.server_address">{{ info.server_address }}</view>
						<view class="item-txt" v-else>具体请询问委托人</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">会见次数</view>
					<view class="item-right">
						<view class="item-txt">{{ info.meet_num }}</view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name == '打官司'">
				<view class="od-item">
					<view class="item-tip">费用承担</view>
					<view class="item-right">
						<view class="item-txt">{{ info.price_type }}</view>
					</view>
				</view>
				<view class="od-item" v-if="info.price_type!='自费'">
					<view class="item-tip  teshu">涉案金额</view>
					<view class="item-right">
						<view class="item-txt">{{ info.qiankuan }}</view>
					</view>
				</view>
				<view class="od-item"  v-if="info.price_type!='自费'">
					<view class="item-tip">案件进度</view>
					<view class="item-right">
						<view class="item-txt">{{ info.jindu }}</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">您的角色</view>
					<view class="item-right">
						<view class="item-txt">{{ info.price_type=='自费'&&info.self_ident=='收款方'?'起诉方':info.self_ident}}</view>
					</view>
				</view>
				<view class="od-item"  v-if="info.price_type!='自费'">
					<view class="item-tip"  @click="$refs.identPopop.open()">对方类型 <image  src="@/static/img/question.png" mode=""
                                             style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="item-txt">{{ info.dui_ident }}</view>
					</view>
				</view>
				<view class="od-item" v-if="info.self_ident=='收款方'">
					<view class="item-tip" @click="toExternalLink('http://zxgk.court.gov.cn/shixin/')">对方失信<image  src="@/static/img/question.png" mode=""
                                             style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="item-txt" v-if="info.is_believe == 1">否</view>
						<view class="item-txt" v-else-if="info.is_believe == 0">是</view>
					</view>
				</view>
				<view class="od-item" v-if="info.self_ident=='收款方'">
					<view class="item-tip" @click="toExternalLink('http://zxgk.court.gov.cn/zhixing/')">对方被执行中<image  src="@/static/img/question.png" mode=""
                                               style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="item-txt" v-if="info.is_fayuan_zhixing == 1">否</view>
						<view class="item-txt" v-else-if="info.is_fayuan_zhixing == 0">是</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip" @click="$refs.organizationPopop.open()">审理机构<image  src="@/static/img/question.png" mode=""
                                             style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="item-txt">{{ info.organization }}</view>
					</view>
				</view>
        <view class="od-item">
          <view class="item-tip" @click.stop="$refs.stagePopup.open();">服务阶段<image  src="@/static/img/question.png" mode=""
                                             style="width: 30rpx;height: 30rpx"></image></view>
          <view class="item-right">
            <view class="item-txt">{{info.lawsuit}} {{ info.stage }}</view>
          </view>
        </view>
				<view class="od-item" v-if="info.server_address != ''">
					<view class="item-tip" :class="info.price_type=='自费'?'require requires':''"   @click="toAddress()">审理地点<image  src="@/static/img/question.png" mode=""
                                                                                         style="width: 30rpx;height: 30rpx"></image></view>
					<view class="item-right">
						<view class="item-txt">
              <template v-if="info.server_address && info.server_address.split(',').length > 1">
                {{ info.server_address.split(',').join('') }}
              </template>
              <template v-else>
                {{ info.server_address }}
              </template>
            </view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name != '打官司'">
			<view class="od-item">
				<view class="item-tip">服务人员</view>
				<view class="item-right">
					<view class="item-txt">
						智能匹配
						<template v-if="info.profession && info.profession.split(',').length > 1">
							{{ info.profession.split(',')[1] }}
						</template>
						<template v-else>
							{{ info.profession }}
						</template>
						<template v-if="info.server_name_id == '全部'">
							全部执业年限的专业律师
						</template>
						<template v-else>
							{{ info.server_name_id }}的专业律师
						</template>
					</view>
				</view>
			</view>
			</template>

			<template v-if="info.pro_name == '打官司'">
				<view class="od-item">
					<view class="item-tip">律师挑选方式</view>
					<view class="item-right">
						<view class="item-txt">智能匹配</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">律师执业年限</view>
					<view class="item-right">
						<view class="item-txt">
							<template v-if="info.server_name_id == '全部'">
								全部执业年限的专业律师
							</template>
							<template v-else>
								{{ info.server_name_id }}的专业律师
							</template>
						</view>
					</view>
				</view>
				<view class="od-item" v-if=" info.profession != ''">
					<view class="item-tip" :class="info.price_type=='自费'?'require requiress':''">律师执业区域</view>
					<view class="item-right">
						<view class="item-txt">
							<template v-if="info.profession && info.profession.split(',').length > 1">
								{{ info.profession.split(',').join('') }}
							</template>
							<template v-else>
								{{ info.profession }}
							</template>
						</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">律师服务语言</view>
					<view class="item-right">
						<view class="item-txt">{{ info.lang }}</view>
					</view>
				</view>
			</template>
			<view class="od-item">
				<view class="item-tip">服务报价</view>
				<view class="item-right">
					<view class="item-txt">{{ info.offer_type }}</view>
				</view>
			</view>
            <!-- info.price_type=='自费' -->
            <view class="od-item" v-if="info.price_type=='自费'">
            	<view class="item-tip"  @click="$refs.offerPopop.open();">报价方式<image  src="@/static/img/question.png" mode="" style="width: 30rpx;height: 30rpx"></image></view>
            	<view class="item-right">
            		<view class="item-txt">{{ info.offer }}</view>
            	</view>
            </view>

			<template v-if="info.pro_name == '打官司'">
			<view class="od-item">
				<view class="item-tip">付款时间</view>
				<view class="item-right">
					<view class="item-txt"><!-- {{ info.pay_time }} -->{{ info.money_type }}</view>
				</view>
			</view>
			<view class="od-item">
				<view class="item-tip">律师费用金额</view>
				<view class="item-right">
					<!-- 活马逻辑样式调一下，逻辑我已经写好了 -->
					<template v-if="info.offer == '活马'">
						 <view class=" inline-list">
							<view class="item-txt"style="color: #f00;">前期费用：{{  Number(info.fee_money.replace( info.fee_money.substring( info.fee_money.indexOf("×"), info.fee_money.length),'')) }}</view>
						<view class="item-txt" style="color: #f00;" v-if="info.self_ident == '应诉方'">后期费用：按律师帮您减少支出金额的{{info.order_later_money}}算</view>
						<view class="item-txt" style="color: #f00;" v-else >后期费用：按律师帮您回收款物金额的{{info.order_later_money}}算</view>
						</view>
					</template>
					<template v-else-if="info.offer == '还魂马'">
						<view class="item-txt" style="color: #f00;" v-if="info.self_ident == '应诉方'">按律师帮您减少金额的30%算</view>
						<view class="item-txt" style="color: #f00;" v-else >按律师帮您回收款物金额的30%计算</view>
					</template>
					<template v-else>
						<view class="item-txt"style="color: #f00;">{{info.order_fee_moeny}}</view>
					</template>
				</view>
			</view>

			</template>
			<template v-if="info.pro_name != '打官司'">
			<view class="od-item">
				<view class="item-tip">律师费用</view>
				<view class="item-right">
					<view class="item-txt" style="color: #f00;">{{info.order_fee_moeny}}</view>
				</view>
			</view>
			</template>
			<template v-if="info.pro_name == '打官司' && info.price_type == '投资人支付(不用还)'">
				<view class="od-item">
					<view class="item-tip teshu" style="margin-top: 16rpx"  @click.stop="jump('/pages/client/order/web-image', { url: info.doc_touziren_img,type:4})">投资人承担<image  src="@/static/img/question.png" mode=""
                                                    style="width: 30rpx;height: 30rpx;"></image></view>
					<view class="item-right"><view class="item-txt">律师费+立案受理费+公告费+异地被告身份查询费</view></view>
				</view>
				<view class="od-item">
					<view class="item-tip teshu">投资人收益</view>
					<view class="item-right"><view class="item-txt">您案件债权总额的30%，回款后7日内支付给投资人，不回款不用付。</view></view>
				</view>
			</template>
			<!-- <view class="od-item" v-if="info.pro_name != '打官司'">
				<view class="item-tip">律师费用</view>
				<view class="item-right">
					<view class="item-txt">￥{{ info.fee_money }}</view>
				</view>
			</view> -->
			<view class="od-item" v-if="info.days_time">
				<view class="item-tip">应付时间</view>
				<view class="item-right">
					<view class="item-txt">{{ info.days_time }}</view>
				</view>
			</view>
      <template v-if="info.price_type != '投资人支付(不用还)' && info.money_type != '先用后付 无忧付'">
        <view class="od-item">
          <view class="item-tip">优惠券</view>
          <view class="item-right">
            <view class="item-txt">{{ info.coupon_id }}</view>
          </view>
        </view>
        <view class="od-item" v-if="info.pay_type">
          <view class="item-tip">付款方式</view>
          <view class="item-right">
            <view class="item-txt">{{ info.pay_type }}</view>
          </view>
        </view>
      </template>
			<template v-if="(!(info.pro_name == '问一下' && info.serve_time == '15分钟')) && info.pro_name != '打官司'">
				<view class="od-item">
					<view class="item-tip">项目资料</view>
					<view class="item-right" v-if="userInfo.is_touziren=='1'||userInfo.is_lawyer=='1'||isCloseOrder">
						<view
							v-if="info.self_ident=='收款方'"
							class="item-right"
							@click="jump('/pages/client/order/project-data-info2', { zanzhuzheng_doc:info.zanzhu,card_images: info.card_images,liaotian_images:info.liaotian_images,jietiao_images: info.jietiao_images,cuishou_images:info.cuishou_images,other_images:info.other_images,huan_images:info.huan_images,type:info.price_type=='自费'? 2 : 1,id:info.id })"
						>
						<view class="item-txt">查看资料</view>
						<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
						</view>
						<view v-else class="item-right" @click="jump('/pages/client/order/upload', { source: JSON.stringify(info.source),readOnly:true })">
						<view class="item-txt">查看资料</view>
						<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
						</view>
					</view>
					<view  class="item-right" v-else>
						<view
							v-if="info.self_ident=='收款方'"
							class="item-right"
							@click="jump('/pages/client/order/project-data-info2', { zanzhuzheng_doc:info.zanzhu,card_images: info.card_images,liaotian_images:info.liaotian_images,jietiao_images: info.jietiao_images,cuishou_images:info.cuishou_images,other_images:info.other_images,huan_images:info.huan_images,type:info.price_type=='自费'? 2 : 1,id:info.id,isTan:isTan })"
						>
						<view class="item-txt">查看资料</view>
						<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
						</view>
			<!--            { source: JSON.stringify(item.source), readOnly: true }-->
						<view v-else class="item-right" @click="jump('/pages/client/order/upload', { source: JSON.stringify(info.source),isTan:isTan,readOnly:true})">
						<view class="item-txt">查看资料</view>
						<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
						</view>
					</view>
				</view>
				<view class="od-item">
					<view class="item-tip">我的要求</view>
					<view class="item-right">
						<view class="item-txt" v-if="info.requirement">{{ info.requirement }}</view>
						<view class="item-txt" v-else>无</view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name == '问一下'">
				<view class="od-item">
					<view class="item-tip">接通方式</view>
					<view class="item-right">
						<view class="item-txt">{{ info.server_tel }}</view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name != '问一下'">
				<template v-if="info.pro_name != '打官司'">
					<view class="od-item">
						<view class="item-tip">服务方式</view>
						<view class="item-right">
							<view class="item-txt">{{ info.serve_type }}</view>
						</view>
					</view>
				</template>
			</template>
			<template v-if="info.pro_name == '写合同' || info.pro_name == '审案子'">
				<view class="od-item">
					<view class="item-tip">完成时间</view>
					<view class="item-right">
						<view class="item-txt">{{ info.docu_time_text }}</view>
					</view>
				</view>
			</template>
			<template v-if="info.pro_name == '刑事会见'">
				<view class="od-item">
					<view class="item-tip">会见时间</view>
					<view class="item-right"><view class="item-txt">根据法律规定，律师接受委托后，需与看守所预约好时间，才可会见。</view></view>
				</view>
			</template>
			<!-- <template v-if="info.pro_name == '打官司'">
				<view class="od-item">
					<view class="item-tip">其他费用</view>
					<view class="item-right">
						<view class="item-txt" v-if="info.price_type == '投资人支付(不用还)'">国家费用（或有）</view>
						<view class="item-txt" v-else>国家费用</view>
					</view>
				</view>
			</template> -->
			<template v-if="info.pro_name != '打官司'">
			<view class="od-item">
				<view class="item-tip">服务范围</view>
				<view class="item-right">
					<view class="item-txt">{{ info.area_title }}</view>
				</view>
			</view>
			</template>
			<!-- 项结束 -->
      <template v-if="info.pro_name == '打官司' && info.price_type == '自费'">
        <view class="od-item">
          <view class="item-tip">第三方费用</view>
          <view class="item-right" @click="jump('/pages/client/user/item-detail', { name: '第三方费用', content: 'content',price_type:'自费' ,info:JSON.stringify(info)})">
            <view class="item-txt">查看第三方费用</view>
            <view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
          </view>
        </view>
      </template>
			<view class="od-item">
				<view class="item-tip">服务内容</view>
				<view class="item-right" @click="jump('/pages/client/user/item-detail', { name: '服务内容',product_id:info.product_id , content: info.serve_content})">
					<view class="item-txt">查看服务内容</view>
					<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
				</view>
			</view>
			<view class="od-item">
				<view class="item-tip">产品说明</view>
				<view class="item-right" @click="jump('/pages/client/user/item-detail', { name: '产品说明',price_type:info.price_type,product_id:info.product_id , content: info.desc_content})">
					<view class="item-txt">查看产品说明</view>
					<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
				</view>
			</view>
			<view class="od-item">
				<view class="item-tip colorblack">下单实付</view>
				<view class="item-right">
					<view class="item-txt colorred" v-if="info.price_type == '投资人支付(不用还)' || info.money_type== '先用后付 无忧付'">￥0</view>
					<view class="item-txt colorred" v-else>￥{{ info.money }}</view>
				</view>
			</view>
		</view>
		<view class="od-box" v-if="info">
			<view class="od-title">订单信息</view>
			<view class="od-item">
				<view class="item-tip">订单号</view>
				<view class="item-right">
					<view class="item-txt">{{ info.order_sn }}</view>
				</view>
			</view>
			<view class="od-item">
				<view class="item-tip">下单时间</view>
				<view class="item-right">
					<view class="item-txt">{{ info.createtime }}</view>
				</view>
			</view>
		</view>
		<!-- 分享券 -->
		<view class="share-conpon-box" @click="openPoup()" v-if="info && info.is_share&&isShowquan"><image src="@/static/img/share-btn.png" mode="widthFix"></image></view>
		<!-- 分享券弹出层 -->
		<uni-popup ref="popupShareConpon" type="center">
			<view class="popup-conpon-box">
				<view class="popup-conpon-top"><image src="@/static/img/share-conpon-con.png" mode="widthFix"></image></view>
				<view class="popup-conpon-bot" @click="goShareCoupon"><image src="@/static/img/share-conpon-wx.png" mode="widthFix"></image></view>
				<view class="popup-conpon-close" @click="$refs.popupShareConpon.close()"><image src="@/static/img/share-close.png" mode="widthFix"></image></view>
			</view>
		</uni-popup>
		<!-- 导航 -->
		<uni-popup ref="popupSelectMaps" type="bottom">
			<order-popup-common-bottom title="导航到此地点" @closePop="closePop('popupSelectMaps')">
				<view class="popup-con" slot="popup-con">
					<view class="od-box marginbottom0">
						<view class="od-item marginbottom10" @click="openlocate('gaode')">
							<view class="item-right">
								<view class="item-txt">高德地图</view>
								<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
							</view>
						</view>
						<view class="od-item marginbottom10" @click="openlocate('baidu')">
							<view class="item-right">
								<view class="item-txt">百度地图</view>
								<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
							</view>
						</view>
						<view class="od-item marginbottom10" @click="goShare()">
							<view class="item-right">
								<view class="item-txt">分享给好友</view>
								<view class="item-nav"><image src="@/static/img/right.png" mode="aspectFit"></image></view>
							</view>
						</view>
					</view>
				</view>
			</order-popup-common-bottom>
		</uni-popup>
		<!-- 级别提示 -->
		<uni-popup ref="popupGrade" type="bottom">
			<order-popup-common-bottom title="" @closePop="closePop('popupGrade')">
				<view class="popup-con" slot="popup-con"><view class="grade-box" v-html="tipGrade"></view></view>
			</order-popup-common-bottom>
		</uni-popup>
<!--    服务领域-->
    <uni-popup ref="popupArea" type="bottom"  @change="removeCss($event)">
      <view class="popup-bottom-box">
        <view class="bot-title">
          <view class="title-txt">服务领域选择说明</view>
          <view class="title-close" @click="close">
            <view class="image-wrapper">
              <image src="@/static/img/close.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="bot-con">
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">债权债务</view>
          </view>
          <view class="bot-content-box">
            借款、货款、租金、装修款、质保金、物业管理费、加工费、理财款、转让款等欠款纠纷。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">合同事务</view>
          </view>
          <view class="bot-content-box">
            赠与、转让店铺、加盟代理、买卖、仓储保管、融资租赁、中介服务、雇佣、劳务、运输等往来合同事务，业务商务谈判，履约追踪，合同管理等欠款以外的合同纠纷。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">侵权赔偿</view>
          </view>
          <view class="bot-content-box">
            人身伤害、财产损害、产品质量损害、交通事故、名誉权、隐私权、精神损害、打假纠纷、商标/专利/著作权侵权纠纷、网络侵权纠纷、商标申请/续期/变更/转让、专利认定/申请/许可使用、著作权保护/转让/许可、商业秘密保护等。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">公司经营</view>
          </view>
          <view class="bot-content-box">
            出资/合伙、股东会/董事会决议事务、股权转让、代持、增资扩股、股份回购、退股、公司控制权等股东间纠纷，投融资法律事务，董事/监事/高级管理人员管理风险等公司内部纠纷。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">婚姻继承</view>
          </view>
          <view class="bot-content-box">
            离婚、夫妻财产分割、夫妻债务承担、小孩抚养、财富传承（遗嘱、继承）、家庭财产纠纷等。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">劳动工伤</view>
          </view>
          <view class="bot-content-box">
            劳动合同、保密合同、竞业禁止合同等纠纷，员工入职、调岗调薪、离职、辞退、经济补偿金、工伤认定、工伤赔偿标准等劳动争议处理，员工手册、规章制度的审修，劳动关系和人事关系等。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">房产土地</view>
          </view>
          <view class="bot-content-box">
            延迟交房、延迟办证、二手房买卖、农民房/宅基地纠纷、确权过户、产权分割、拍卖、工程款、房屋质量等。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">治安刑事</view>
          </view>
          <view class="bot-content-box">
            打架斗殴、诈骗、交通肇事、重伤、轻伤、行贿受贿、职务侵占、挪用资金、逃税、公司经营中的刑事责任等。
          </view>
        </scroll-view>
        <view class="bot-save">
          <view class="save-box" @click="close">朕知道了</view>
        </view>
      </view>
    </uni-popup>
<!--    对方类型-->
    <uni-popup ref="identPopop" type="bottom" background-color="#fff" @change="removeCss($event)" >
      <view class="popup-bottom-box">
        <view class="bot-title">
          <view class="title-txt">对方类型选择说明</view>
          <view class="title-close" @click="closePop('identPopop')">
            <view class="image-wrapper">
              <image src="@/static/img/close.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="bot-con">
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">快速指引</view>
          </view>
          <view class="bot-content-box">
            可在企查查、启信宝、爱企查、国家企业信用信息公示系统上查询确认对方的类型
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">个人/个体户</view>
          </view>
          <view class="bot-content-img-box">
            <image src="@/static/img/ident-popup1.png" @click="clickImg(0)"></image>
            <image src="@/static/img/ident-popup2.png"  @click="clickImg(1)" style="margin-left:20rpx"></image>
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">私企/公司</view>
          </view>
          <view class="bot-content-img-box">
            <image src="@/static/img/ident-popup3.png" @click="clickImg(2)"></image>
            <image src="@/static/img/ident-popup4.png" @click="clickImg(3)" style="margin-left:20rpx"></image>
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">国企/单位</view>
          </view>
          <view class="bot-content-img-box">
            <image src="@/static/img/ident-popup5.png" @click="clickImg(4)"></image>
            <image src="@/static/img/ident-popup6.png" @click="clickImg(5)" style="margin-left:20rpx"></image>
          </view>
          <view class="bot-content-img-box">
            <image src="@/static/img/ident-popup7.png"  @click="clickImg(6)" ></image>
            <image src="@/static/img/ident-popup8.png" @click="clickImg(7)"  style="margin-left:20rpx"></image>
          </view>
          <view class="bot-content-img-box">
            <image src="@/static/img/ident-popup9.png" @click="clickImg(8)"></image>
          </view>
        </scroll-view>
        <view class="bot-save">
          <view class="save-box" @click="closePop('identPopop')">朕知道了</view>
        </view>
      </view>
    </uni-popup>
<!--    审理机构-->
    <uni-popup ref="organizationPopop" type="bottom" @change="removeCss($event)">
      <view class="popup-bottom-box">
        <view class="bot-title">
          <view class="title-txt">审理机构选择说明</view>
          <view class="title-close" @click="closePop('organizationPopop')">
            <view class="image-wrapper">
              <image src="@/static/img/close.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="bot-con" style="line-height: 22px">
          <!--        <image src="@/static/img/743.png" mode="aspectFit" style="width: 100%;height: 73%;"></image>-->
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text">您和对方没有约定由哪个机构审理的，</view>
          </view>
          <view class="bot-content-box" style="font-size: 14px">
            选 <span class="bold">人民法院</span>。
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text">您和对方有书面文件约定由人民法院审理的，</view>
          </view>
          <view class="bot-content-box" style="font-size: 14px">
            选 <span class="bold">人民法院</span>。
          </view>
          <view class="bot-content">
            <span class="title_box">范例：</span><span class="content_box">因本协议引起的或与本协议有关的任何争议，由双方友好协商解决。协商不成时，双方均有权向<span class="underline">原告住所地的人民法院</span>提起诉讼。</span>
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text">您和对方有书面文件约定由XXX仲裁委员会审理的，</view>
          </view>
          <view class="bot-content-box" style="font-size: 14px">
            选 <span class="bold">商事仲裁委</span>。
          </view>
          <view class="bot-content">
            <span class="title_box" style="width: 294rpx;">范例：</span><span class="content_box">因本协议引起的或与本协议有关的任何争议，由双方友好协商解决，协商不成的，双方均同意提交<span class="underline">广州仲裁委员会仲裁</span>，并同意按照该会届时有效的仲裁规则仲裁。</span>
          </view>
        </scroll-view>
        <view class="bot-save">
          <view class="save-box" @click="closePop('organizationPopop')">朕知道了</view>
        </view>
      </view>
    </uni-popup>
<!--    服务阶段-->
    <uni-popup ref="stagePopup" type="bottom" @change="removeCss($event)">
      <view class="popup-bottom-box">
        <view class="bot-title">
          <view class="title-txt">服务阶段选择说明</view>
          <view class="title-close" @click="closePop('stagePopup')">
            <view class="image-wrapper">
              <image src="@/static/img/close.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="bot-con" style="height:500rpx">
          <view class="stage-item-box" v-for="(item,index) in stageSelectData" :key='index' @click="stageItemClick(item)">
            <view class="left-box">
              <view class="icon-box"></view>
              <view class="title-box">
                {{item.title}}
              </view>
            </view>
            <view class="right-box">
              <image src="@/static/img/right.png" mode="aspectFit"></image>
            </view>
          </view>
        </scroll-view>
        <view class="bot-save">
          <view class="save-box" @click="closePop('stagePopup')">朕知道了</view>
        </view>
      </view>
    </uni-popup>
<!--    自费报价方式-->
    <uni-popup ref="offerPopop" type="bottom"  @change="removeCss($event)">
      <view class="popup-bottom-box">
        <view class="bot-title">
          <view class="title-txt">报价方式选择说明</view>
          <view class="title-close" @click="closePop('offerPopop')">
            <view class="image-wrapper">
              <image src="@/static/img/close.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="bot-con" v-if="self_ident == '收款方'">
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">千里马</view>
          </view>
          <view class="bot-content-box">
            您认为很好收的债，请律师只是走个程序，省心省事</br>·先付费 后办事</br>·花小钱 办大事</br>·回款 全归您
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">活马</view>
          </view>
          <view class="bot-content-box">
            您认为可以收回的债，但要花点心思</br>·前期跑腿费+回款后提成</br>·风险共担 长效激励</br>·利益均衡 效益可期
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">还魂马</view>
          </view>
          <view class="bot-content-box">
            您认为不抱希望的烂债，反正搏一把</br>·先用后付 大力出奇迹</br>·风险律师担 不回款不收钱</br>·重赏之下 必有勇士
          </view>

        </scroll-view>
        <scroll-view scroll-y="true" class="bot-con" v-else>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">千里马</view>
          </view>
          <view class="bot-content-box">
            您认为要偿还的债，请律师走个程序，争取还款计划和时间</br>·先付费 后办事</br>·花小钱 办大事</br>·少烦恼，不慌乱
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">活马</view>
          </view>
          <view class="bot-content-box">
            您认为账不对，要花点心思理清</br>·前期跑腿费+见面部分提成</br>·风险共担 长效激励</br>·利益均衡 效益可期
          </view>
          <view class="bot-title-box">
            <view class="icon-box"></view>
            <view class="title-text-box">还魂马</view>
          </view>
          <view class="bot-content-box">
            您认为不抱希望了，全力争取减免，少亏就是赚</br>·先用后付 不减免不收费</br>·风险律师担 大力出奇迹</br>·重赏之下 必有勇士
          </view>

        </scroll-view>
        <view class="bot-save">
          <view class="save-box" @click="closePop('offerPopop')">朕知道了</view>
        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import $ from "jquery";
export default {
	props: {
		info: {},
    xiadan:{ //判断是否下单页面进来的详情页面
      type:Boolean,
      default:false
    },
    isCloseOrder:{  //判断是否是  关闭的订单 服务完成、服务解除 的订单。
      type:Boolean,
      default:false
    },
    isTan:{  //判断是否   打官司法务服务的时候
      type:Boolean,
      default:false
    }
	},
	data() {
		return {
			inviteCode: '',
			tipGrade: '',
      isShowquan:false,
      doc_jieduan2_img:[],//服务阶段的民事申请图片数组
      stageSelectData:[{title:'民事诉讼流程图',image:'',type:'img'},{title:'民事审限表',image:'',type:'doc'},{title:'商事仲裁流程图',image:'',type:'img'},{title:'劳动仲裁流程图',image:'',type:'img'}],
    };
	},
  computed: {
    ...mapGetters(['userInfo'])
  },
  created(){
    console.log("====userInfo",this.info)
    if(this.userInfo.is_weituo&&(((this.info.pro_name != '打官司'&&this.info.status=='0')||(this.info.pro_name == '打官司'&&this.info.status=='0'))||!this.info)){
      this.isShowquan = true;
      setTimeout(()=>{
        this.openPoup();
      },500)
    }else{
      this.isShowquan = false
    }
    this.stageSelectData[0].image = this.info.doc_jieduan1
    this.stageSelectData[1].image = this.info.doc_jieduan2
    this.stageSelectData[2].image = this.info.doc_jieduan4
    this.stageSelectData[3].image = this.info.doc_jieduan5
  },
	methods: {
        toExternalLink(url){
            const nav = navigator.userAgent;
            if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
                location.href =url
            } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
                this.$bridge.callhandler('JumpToExternalLink', {url:url,}, res => {});
            }
        },
    toAddress(){
      console.log("====this.info.doc_shenli_img",this.info.doc_shenli_img[0])
      let obj = {'image':this.info.doc_shenli_img[0]};
      this.imageClick(obj)
    },
    imageClick(item){
      let previewImages = [];
      previewImages.push(item.image);
      // this.previewImages(previewImages);
      // 预览图片
      const nav = navigator.userAgent;
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.previewPicture(JSON.stringify(previewImages));
      } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('previewPicture', previewImages, data => {});
      }
    },
    openPoup(){
      this.$refs.popupShareConpon.open()
    },
		openlocate(type) {
			let params = this.info.longitude;
			params = {
				...params,
				type: type
			};
			console.log(JSON.stringify(params));

			const nav = navigator.userAgent;
			if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
				phone.navigation(JSON.stringify(params));
			} else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
				this.$bridge.callhandler('navigation', params, data => {});
			}
		},
		goShare() {
			let shareInfo = {
				title: this.info.longitude.poiname,
				content: this.info.longitude.poiaddress,
				imageUrl: `${this.$API_URL}/source/go.png`,
				path: `${this.$VIEW_URL}/#/pages/client/order/weixin-map?lat=${this.info.longitude.latlng.lat}&lng=${this.info.longitude.latlng.lng}&name=${
					this.info.longitude.poiname
				}&address=${this.info.longitude.poiaddress}`
			};

			const nav = navigator.userAgent;
			if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
				phone.share(JSON.stringify(shareInfo));
			} else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
				this.$bridge.callhandler('share', shareInfo, data => {
					// 处理返回数据
					console.log(data, '我走了这里');
				});
			}
		},
		// 成功唤起微信分享后,调用
		async shareOk() {
			let formData = {
				id: this.info.id,
				token: uni.getStorageSync('token')
			};
			let res = await this.$api('index.coupon_share', formData);
			if (res.code == 1) {
				this.$refs.popupShareConpon.close();
				this.info.is_share = 0;
			}
		},
		goShareCoupon() {
			let shareInfo = {
				title: '好友送福利, 200元优惠券快来领，手快有, 手慢无 ',
				content: '找律师，上法力。先用后付，事成才付费，律师服务差不了。',
				imageUrl: `${this.$API_URL}/source/go.png`,
				path: `${this.$VIEW_URL}/#/pages/client/user/accept-share-coupon?order_id=${this.info.id}`
			};
			const nav = navigator.userAgent;
			if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
				phone.share(JSON.stringify(shareInfo));
			} else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
				this.$bridge.callhandler('share', shareInfo, data => {
					// 处理返回数据
					this.shareOk();
				});
			}
		},
		async getGradeTip() {
			this.$refs.popupGrade.open();
			let formData = {
				serve_grade: this.info.server_grade,
				serve_dead: this.info.server_dead,
				token: uni.getStorageSync('token')
			};
			let res = await this.$api('index.change_dead', formData);
			this.tipGrade = res.data.value_text;
		},
    openPopup(){
      this.$refs.popupArea.open();
    },
    removeCss(e){
      this.is_poup = e.show
      if(this.is_poup){
        $(document.body).css({'overflow':'hidden'})
      }else{
        $(document.body).css({'overflow':''})
      }
    },
    close(){
      this.closePop('popupArea')
    },
    clickImg(index) {
      var previewImages = [];
      previewImages.push(this.imgList[index]);
      //   // 预览图片
      var nav = navigator.userAgent;
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.previewPicture(JSON.stringify(previewImages));
      } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('previewPicture', previewImages, data => {});
      }
    },
	}
};
</script>

<style lang="scss">
.share-conpon-box {
	position: fixed;
	right: 30rpx;
	bottom: 30rpx;
	color: #ffffff;
	width: 100rpx;
	image {
		width: 100%;
	}
}
.popup-conpon-box {
	width: 480rpx;
	height: 450rpx;
	background: url(@/static/img/share-conpon-bg.png);
	background-size: 100%;
	.popup-conpon-top {
		padding: 100rpx 28rpx 0rpx;
		image {
			width: 100%;
		}
	}
	.popup-conpon-bot {
		width: 60rpx;
		margin: auto;
		image {
			width: 100%;
		}
	}
	.popup-conpon-close {
		width: 40rpx;
		margin: 40rpx auto 0;
		image {
			width: 100%;
		}
	}
}
.od-title{
	display: flex;
}
.flex-warp-order{
	flex-wrap: wrap;
}
.flex-just{
	justify-content: flex-start;
}
.service-item{
	margin-left: 0;
	margin-right: 30rpx;
	margin-top: 10rpx;
	background-color: #FFC801;
	color: #ffffff;
	border: none;
	height: 65rpx;
	line-height: 65rpx;
}
.item-tip{
	//margin-top: 11rpx;
	width: 210rpx !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //uni-image{
  //  vertical-align: middle;
  //}
}
.require::after {
  top: 7px;
}
.requires::after {
  left: 65px;
}
.requiress::after {
  left: 94px;
}
.teshu{
  align-items: normal;
  margin-top: 5px;
}
.popup-bottom-box {
  background-color: #ffffff;
  overflow: auto;
  // border-top-left-radius: 26rpx;
  // border-top-right-radius: 26rpx;

  .bot-title {
    display: flex;
    align-items: center;

    .title-txt {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-weight: bold;
    }

    .title-close {
      width: 80rpx;
      height: 80rpx;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .image-wrapper {
        width: 26rpx;
        height: 26rpx;
        vertical-align: middle;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .bot-con {
    padding: 0 30rpx;
    height: 800rpx;
    width: calc(100% - 60rpx);
    // overflow-y: scroll;
    .service-list {
      margin-bottom: 20rpx;
    }
    .bot-title-box{
      display: flex;
      align-items: center;
      height: 45rpx;
      .icon-box{
        width: 12rpx;
        height: 30rpx;
        background: #FFC900;
        opacity: 1;
        border-radius: 6rpx;
      }
      .title-text-box{
        margin-left: 5rpx;
        height: 45rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        opacity: 1;
      }
    }
    .bot-content-box{
      margin: 10rpx 0rpx 10rpx 17rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0,0,0,0.6);
      opacity: 1;
      span{
        color: #000;
        font-weight: 600;
      }
    }
    .line-box{
      width: 100%;
      height: 1rpx;
      border: 1px solid #D5D5D5;
      background-color: #D5D5D5;
      margin: 15rpx 0rpx;
    }
  }
  .bot-save{
    width: 100%;
    height: 102rpx;
    background: rgba(255, 255, 255, 0.39);
    box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .save-box{
      width: 60%;
      height: 60rpx;
      // border-radius: 30rpx;
      background-color: #F9B804;
      color: #fff;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.bot-con {
  padding: 0 30rpx;
  height: 800rpx;
  // overflow-y: scroll;
  width: calc(100% - 60rpx);
  .service-list {
    margin-bottom: 20rpx;
  }
  .bot-title-box{
    display: flex;
    align-items: center;
    .icon-box{
      width: 12rpx;
      height: 30rpx;
      background: #FFC900;
      opacity: 1;
      border-radius: 6rpx;
    }
    .title-text-box{
      margin-left: 5rpx;
      height: 45rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      opacity: 1;
    }
    .bot-content-box{
      margin: 10rpx 0rpx 10rpx 17rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0,0,0,0.6);
      opacity: 1;
      span{
        color: #000;
        font-weight: 600;
      }
    }
  }
  .bot-title-two-box{
    display: flex;
    .icon-box{
      margin-top: 5rpx;
      width: 12rpx;
      height: 30rpx;
      background: #FFC900;
      opacity: 1;
      border-radius: 6rpx;
    }
    .bot-content-box{
      margin: 0rpx 0rpx 0rpx 17rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: rgba(0,0,0,0.6);
      opacity: 1;
      span{
        color: #000;
        font-weight: 600;
      }
    }
  }
  .bot-content-box{
    margin: 10rpx 0rpx 10rpx 17rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0,0,0,0.6);
    opacity: 1;
    span{
      color: #000;
      font-weight: 600;
    }
  }
  .bot-content-img-box{
    margin: 10rpx 0rpx 10rpx 17rpx;
    display: flex;
    image{
      width: 300rpx;
      height: 420rpx;
    }
  }
  .line-box{
    width: 100%;
    height: 1rpx;
    border: 1px solid #D5D5D5;
    background-color: #D5D5D5;
    margin: 15rpx 0rpx;
  }
  .stage-item-box{
    width: 100%;
    height: 60rpx;
    margin: 20rpx 0rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-box{
      display: flex;
      align-items: center;
      .icon-box{
        width: 12rpx;
        height: 30rpx;
        background: #FFC900;
        opacity: 1;
        border-radius: 6rpx;
      }
      .title-box{
        margin-left: 5rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
      }
    }
    .right-box{
      width: 16rpx;
      height: 40rpx;
      margin-left: 20rpx;
      image {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  .lang-item-box{
    margin: 10rpx 0rpx 10rpx 40rpx;
    width: calc(100% - 20rpx);
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-box{
      width: 40rpx;
      height: 40rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .content-box{
      width: calc(100% - 100rpx);
      height: 80rpx;
      line-height: 80rpx;
      border-bottom: 2rpx solid rgba(136,136,136,0.6);
    }
  }
  .lawyer-con {
    margin-bottom: 20rpx;
    display: flex;
    border-radius: 30rpx;
    border: 1rpx solid #DCDCDC;
    padding: 10rpx 20rpx;
    // box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.16);
  }
  .lawyer-left {
    font-weight: bold;
    width: 100rpx;
    margin-right: 30rpx;
    .image-wrapper {
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .lawyer-right {
    flex: 1;
    .lawyer-name {
      display: flex;
      margin-bottom: 20rpx;
      justify-content: space-between;
      .name-left {
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
      }
      .name-right {
        padding-left: 10rpx;
        .image-wrapper {
          width: 30rpx;
          height: 30rpx;
          image {
            vertical-align: middle;
            width: 100%;
            height: 100%;
          }
        }
      }
      .name-center {
        flex: 1;
      }
    }
    .lawyer-tip {
      margin-bottom: 20rpx;
      color: #666666;
      font-size: 24rpx;
    }
    .lawyer-item {
      margin-bottom: 10rpx;
      display: flex;

      .item-left {
        margin-right: 10rpx;
        .image-wrapper {
          width: 30rpx;
          height: 30rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .item-txt {
        color: #aaa;
        font-size: 24rpx;
        flex: 1;
      }
    }
  }
}
.bot-content{
  display: flex;
  margin: 5px 0px 5px 8px;
}
.bot-content .title_box{
  width: 240rpx;
}
.bot-content .underline{
  display: inline-block;
  border-bottom: 1px solid #000;
}
</style>
